<template lang="">
  <van-row class="demo-row" v-for="item in listarr" :key="item.id">
    <van-col span="4">{{ item.title }}</van-col>
    <van-col span="4">{{ item.content }}</van-col>
    <van-col span="4">
      是否公开<van-checkbox
        v-model="item.status"
        @click="Change"
      ></van-checkbox>
    </van-col>
    <van-col span="4">
      <van-button @click="onDelBtnClick(item)">删除</van-button>
    </van-col>
    <van-col span="4">
      <van-button @click="onChange(item, index)"
        >修改
        <van-dialog v-model:show="show" title="标题" show-cancel-button>
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
          />
        </van-dialog>
      </van-button>
    </van-col>
    <el-dialog v-model="showComponent" width="300" center>
      <el-form :model="form">
        <el-form-item label="标题" label-width="100px">
          <el-input v-model="item.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公开状态" label-width="100px">
          <el-checkbox v-model="item.is_selesct" size="large" />
        </el-form-item>
        <el-form-item label="内容" label-width="100px">
          <el-input v-model="item.content" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button>重置</el-button>
          <el-button type="primary" @click="xiugaiFn">修改</el-button>
        </div>
      </template>
    </el-dialog>
  </van-row>
</template>
<script>
import http from "../utils/http";
export default {
  data() {
    return {
      listarr: [],
      showComponent: false,
      title: this.title,
    };
  },
  async created() {
    try {
      let r = await http({
        method: "get",
        url: "/posts",
      });

      this.listarr = r.data;
    } catch (err) {
      console.log(err);
    }
    console.log(this.listarr);
  },
  methods: {
    async onDelBtnClick(item) {
      let id = item.id;

      let r = await http({
        url: "/posts/" + id,
        method: "delete",
        params: { id },
      });
      // 删除成功-刷新列表
      this.created();
    },
    async created() {
      try {
        let r = await http({
          method: "get",
          url: "/posts",
        });
        this.listarr = r.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Change(item) {
      let id = item.id;
      let status = item.status;

      let r = await http({
        url: "/posts/" + id,
        method: "put",
        params: { id, status },
      });
      console.log(r);
      this.created();
    },
    onChange(item) {
      console.log(item.id);
      let id = item.id;
      console.log(id);
      this.showComponent = !this.showComponent;
      this.title = item.title;
      this.content = item.content;
      this.is_select = item.is_select;
    },
  },
};
</script>
<style lang=""></style>
